<script setup>
import {ref} from "vue";
import {Lock, User} from "@element-plus/icons-vue";

const pwdData = ref({
  username: "",
  newPassword: "",
  rePassword: "",
});
//校验规则
const checkPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== pwdData.value.newPassword) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
}

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" },
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" },
  ],
  rePassword: [
    {validator: checkPassword, trigger: 'blur'}
  ],
};

//调用接口，更改密码
import {userPasswordUpdateService} from '@/api/user.js'
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
const updatePassword = async () => {
    const result = await userPasswordUpdateService({
      username: pwdData.value.username,
      new_pwd: pwdData.value.newPassword,
      re_pwd: pwdData.value.rePassword
    });
    ElMessage.success(result.msg ? result.message : '修改成功');
    //返回登录页
    await router.push('/user/manage')

};

import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();

const userInfo = ref({...userInfoStore.info})

</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>重置密码</span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form label-width="100px" size="large" :model="pwdData" :rules="rules" >
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="请输入用户名" :prefix-icon="User" v-model="pwdData.username" ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input placeholder="请输入新密码" type="password" :prefix-icon="Lock" v-model="pwdData.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="rePassword">
            <el-input placeholder="请再次输入新密码" type="password" :prefix-icon="Lock" v-model="pwdData.rePassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="button" type="primary" @click="updatePassword">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>